<template>
  <form-wrap
    :schema="formSchema"
    :rules="rules"
    :auto-label-width="false"
    @register="formRegister"
  />
</template>
<script setup lang="ts">
  import { useForm } from '@/hooks/form';
  import { useValidator } from '@/hooks/validator';
  import { useDictStore } from '@/store';
  import { filter } from '@/utils/tree';

  const props = defineProps({
    data: {
      type: Object,
      default: () => null,
    },
    treeList: {
      type: Array,
      default: () => [],
    },
    currentParentId: {
      type: String,
      default: () => null,
    },
    depth: {
      type: Number,
      default: () => 0,
    },
  });

  const dictStore = useDictStore();
  const { required } = useValidator();
  const { formRegister, formMethods } = useForm();
  const { submitForm, setValues, getValue } = formMethods;

  const formSchema = computed<FormSchema[]>(() => {
    return [
      { field: 'id', hidden: true },
      {
        field: 'parentId',
        label: '上级',
        type: 'a-tree-select',
        props: {
          fieldNames: {
            key: 'id',
            icon: 'ico',
          },
          data: [{ id: '0', title: '顶级目录' }].concat(tree.value),
        },
        value: getValue('parentId') || props.currentParentId || '0',
      },
      {
        field: 'type',
        label: '类型',
        type: 'radio',
        options: dictStore.getItems('ModuleType'),
        props: {
          type: 'button',
        },
        update: (val: number) => {
          typeValue.value = val;
        },
        control: [
          {
            handle(val: number) {
              return val === 1;
            },
            method: 'hidden',
            rule: ['icon', 'path', 'component', 'hidden'],
          },
          {
            handle(val: number) {
              return val === 2;
            },
            method: 'hidden',
            rule: ['icon', 'path', 'component', 'hidden', 'permissionCode'],
          },
          {
            handle(val: number) {
              return val === 3;
            },
            method: 'hidden',
            rule: ['permissionCode'],
          },
        ],
      },
      {
        field: 'sequence',
        label: '排序',
        type: 'InputNumber',
        props: {
          min: 1,
        },
      },
      {
        field: 'name',
        label: '名称',
        type: 'Input',
        props: {
          maxlength: 50,
        },
      },
      {
        field: 'title',
        label: '标题',
        type: 'Input',
        props: {
          maxlength: 50,
        },
      },
      {
        field: 'icon',
        label: '图标',
        type: 'IconSelector',
      },
      {
        field: 'path',
        label: '访问路径',
        type: 'Input',
        props: {
          maxlength: 100,
        },
      },
      {
        field: 'permissionCode',
        label: '授权编码',
        type: 'Input',
        props: {
          maxlength: 200,
        },
      },
      {
        field: 'component',
        label: '组件',
        type: typeValue.value === 1 ? 'Select' : 'Input',
        props: {
          maxlength: 200,
          options:
            typeValue.value === 1
              ? [
                  { label: '一级目录', value: '#' },
                  { label: '二级目录', value: '##' },
                ]
              : [],
        },
      },
      {
        field: 'hidden',
        label: '显示/隐藏',
        type: 'Switch',
        props: {
          checkedText: '显示',
          uncheckedText: '隐藏',
          checkedValue: 2,
          uncheckedValue: 1,
        },
        value: 2,
      },
    ];
  });

  const rules = ref({
    name: [required()],
    title: [required()],
    type: [required()],
    path: [required()],
    component: [required()],
    permissionCode: [required()],
  });

  const tree = ref<any[]>([]);
  const typeValue = ref();

  onMounted(() => {
    if (props.data) {
      setValues(props.data);
    }
    if (props.treeList && props.treeList.length) {
      tree.value = filter(props.treeList, (node: any) => {
        return node.type !== 3;
      });
    }
  });

  const submit = async () => {
    return await submitForm();
  };

  defineExpose({
    submit,
  });
</script>
